<template>
  <el-form ref="classForm" label-width="100px" style="margin-top: 20px">

    <el-form-item class="form-item" label="选择班级:">
      <el-select v-model="curClass" placeholder="选择开通班级" value-key="id" value="">
        <el-option
          v-for="item in classes"
          :key="item.id"
          :label="item.name"
          :value="item"
        />
      </el-select>
      <el-button type="primary" plain style="margin-left: 5px" :disabled="!curClass" @click="dialog = true">班级详情</el-button>
    </el-form-item>

    <el-form-item class="form-item" label="选择章节:">
      <el-select
        v-model="curSeries"
        placeholder="选择系列"
        value=""
        @change="filterChapter"
      >
        <el-option
          v-for="item in series"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="curChapter"
        placeholder="选择开通章节"
        value=""
        style="margin-left: 5px"
        @change="getCourseList"
      >
        <el-option
          v-for="item in chapterFilter"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item class="form-item" label="选择关卡:">
      <el-drag-select v-model="curCourse" style="width:200px;" multiple placeholder="选择开通关卡" value-key="id" value="">
        <el-option
          v-for="item in courses"
          :key="item.id"
          :label="item.name"
          :value="item"
        />
      </el-drag-select>

      <div style="margin-top:10px;">
        <el-tag v-for="item of curCourse" :key="item.id" style="margin-right:15px;">
          {{ item.name }}
        </el-tag>
      </div>
    </el-form-item>

    <el-button type="primary" :loading="loading" style="margin-left: 100px;width: 200px" @click="create">开通课程</el-button>
    <el-dialog v-if="dialog" :visible.sync="dialog" :title="curClass.name">
      <table-simple
        :classid="curClass.id"
        style="width: 510px;"
      />
    </el-dialog>
  </el-form>
</template>

<script>
import { fetchClassList } from '../../api/class'
import { fetchSimpleChapterList } from '../../api/chapter'
import ElDragSelect from '../../components/DragSelect'
import { fetchSeriesList } from '../../api/serires'
import { fetchCourseList, openCourse } from '../../api/course'
import TableSimple from '../student/module/tableSimple'
export default {
  name: 'Create',
  components: { TableSimple, ElDragSelect },
  data() {
    return {
      dialog: false,
      title: '',
      total: 0,
      loading: false,
      series: [],
      classes: [],
      chapters: [],
      courses: [],
      chapterFilter: [],
      courseFilter: [],
      curClass: null,
      curChapter: null,
      curSeries: null,
      curCourse: [],
      query: {
        page: 1,
        limit: 20,
        name: null,
        sort: '+id',
        classID: '-1'
      },
    }
  },
  created() {
    this.getClassList()
    this.getSeriesList()
  },
  methods: {
    getClassList() {
      fetchClassList().then(response => {
        if (response.data.total !== 0) {
          this.classes = response.data.items
        } else {
          this.classes = []
        }
      }).catch(() => {
        this.$ERROR('获取班级列表失败')
      })
    },
    getSeriesList() {
      fetchSeriesList().then(response => {
        if (response.data.total !== 0) {
          this.series = response.data.items
          this.getChapterList()
        } else {
          this.series = []
        }
      }).catch(() => {
        this.$ERROR('获取系列列表失败')
      })
    },
    getChapterList() {
      fetchSimpleChapterList().then(response => {
        if (response.data.total !== 0) {
          this.chapters = response.data.items
          this.filterChapter()
        } else {
          this.chapters = []
        }
      }).catch(() => {
        this.$ERROR('获取章节列表失败')
      })
    },
    getCourseList() {
      this.curCourse = []
      const chapterID = { chapter: this.curChapter }
      fetchCourseList(chapterID).then(response => {
        if (response.data.total !== 0) {
          this.courses = response.data.items
        } else {
          this.courses = []
        }
      }).catch(() => {
        this.$ERROR('获取关卡列表失败')
      })
    },
    filterChapter() {
      this.curChapter = null
      this.chapterFilter = this.chapters.filter(item => {
        return item.series === this.curSeries
      })
      if (this.chapterFilter.length !== 0) {
        this.curChapter = this.chapterFilter[0].id
        this.getCourseList()
      }
    },
    create() {
      this.loading = true
      const list = []
      for (const item of this.curCourse) {
        const config = {
          id: item.id,
          work_id: item.work_id
        }
        list.push(config)
      }
      openCourse({ classID: this.curClass.id, chapterID: this.curChapter, courses: list }).then(() => {
        this.loading = false
        this.$SUCCESS('开通课程成功')
      }).catch(() => {
        this.loading = false
        this.$ERROR('开通课程失败')
      })
    }
  }
}
</script>

<style scoped>

</style>
